<template>
  <!-- <div>{{ parent_list }}</div> -->
  <div class="GetInFormation">
    {{ Information }}
    <div v-for="item in Information" :key="item" class="icon_box"></div>
  </div>
</template>
  
  <script setup lang="ts">
import {
  getInformation,
  getWord,
  getImageWord,
  getService,
  getPolicy,
  getComm_evaluate_count,
  getNearbyAttractions
} from "@/request/analysis";
let Information = ref('');
onMounted(() => {
  //   console.log("==", parent_list);
});
const props = defineProps<{
  city_id_list: String;
}>();
const get_data = async (item: any) => {
  await getInformation({
    list_id: item
  }).then(({ data }) => {
    Information.value = data
    console.log("基础信息",data);
  });
};
// const parent: any = ref(props.name);
watch(
  () => props.city_id_list,
  (newValue, oldValue) => {
    if (newValue) {
      get_data(newValue);
    }
  }
);
</script>
  
  <style lang="scss" scoped>
.GetInFormation {
  // background-color: rgb(80, 95, 90);
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  // justify-content: center;
  // height: 500px;
  // margin-bottom: 20px;
  // padding-bottom: 10px;
  gap: 7px;

  .icon_box {
    // background-color: aquamarine;
    display: flex;
    flex-direction: row;
    // margin-top: 10px;
    // padding-top: 10px;
    margin-left: 1%;
    // border: 1px solid red;
    // justify-content: center;
    // line-height: 100px;
    width: 30%;
    // background-color: cadetblue;
    height: 70px;
    .active {
      background-color: aqua;
    }
    // padding-bottom: 10px;
    .icon_box_item {
      cursor: pointer;
      // width: 50%;
      //   height: 100px;
      // border: 1px solid red;
      svg {
        font-size: 10px;
      }
      margin: 10px auto;
      // background-color: #fff;
      text-align: center;
    }
  }
}
</style>